<template>
  <div class="dashboard-editor-container">
    <div class="vehicle-map">
      <div class="vehicle-map-top">
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="index-top-3-top">
          <div
            :class="
              indexActive == index
                ? 'index-top-3-top-li active'
                : 'index-top-3-top-li'
            "
            v-for="(item, index) in dataTime1"
            @click="indexChange(item, index)"
          >
            {{ item }}
          </div>
        </div>
        <div class="index-top-3-top">
          <div
            :class="
              indexActive1 == index
                ? 'index-top-3-top-li active'
                : 'index-top-3-top-li'
            "
            v-for="(item, index) in dataTime2"
            @click="indexChange1(item, index)"
          >
            {{ item }}
          </div>
        </div>
        <el-date-picker
          style="height: 35px; margin-left: 20px; width: 250px"
          v-model="valueTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <VehicleMap />
    </div>
    <div class="content">
      <div class="content-li">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp">
            <div class="index-top-3-top">
              <div
                :class="
                  indexActive2 == index
                    ? 'index-top-3-top-li active'
                    : 'index-top-3-top-li'
                "
                v-for="(item, index) in dataTime3"
                @click="indexChange2(item, index)"
              >
                {{ item }}
              </div>
            </div>
            <el-date-picker
              style="height: 35px; margin-left: 20px; width: 250px"
              v-model="valueTime1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
            <el-select
              style="margin-left: 20px"
              v-model="value1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <LineChart
            text="车辆进出数量统计图"
            height="300px"
            :dataLegend="dataLegend1"
            :series="series1"
            :dataAxis="dataAxis1"
          />
        </div>
      </div>
      <div class="content-li">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp">
            <el-date-picker v-model="value2" type="date" placeholder="选择日期">
            </el-date-picker>
            <el-select
              style="margin-left: 20px"
              v-model="value3"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <BarChart
            text="停车时长数量统计图"
            :dataAxis="dataAxis2"
            :dataLegend="dataLegend2"
            :series="series2"
            height="300px"
          />
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import VehicleMap from "./dashboard/VehicleMap";
import LineChart from "./dashboard/LineChart";
import BarChart from "./dashboard/BarChart";
export default {
  name: "VehicleManagement",
  components: {
    VehicleMap,
    LineChart,
    BarChart,
  },
  data() {
    return {
      dataLegend1: ["入场数量", "出场数量", "车位剩余数"],
      dataLegend2: ["停车时长"],
      dataAxis1: [
        "2024-03-28",
        "2024-02-08",
        "2024-01-28",
        "2023-12-28",
        "2023-11-28",
        "2023-10-28",
      ],
      dataAxis2: ["1h", "1-2h", "2-3h", "3-4h", "5-10h", "10-15h"],

      options: [
        {
          value: "选项1",
          label: "全国区域",
        },
      ],
      options1: [
        {
          value: "选项1",
          label: "所有停车场",
        },
      ],
      options3: [
        {
          value: "选项1",
          label: "所有停车场",
        },
      ],
      value: "",
      value1: "",
      value2: "",
      value3: "",
      valueTime: "",
      valueTime1: "",
      indexActive: 0,
      indexActive1: 0,
      indexActive2: 0,
      dataTime1: ["城外", "城内"],
      dataTime2: ["近一周", "近三周"],
      dataTime3: ["按小时计算", "按天计算"],
      series2: [
        {
          name: "停车时长",
          type: "bar",
          barWidth: 50,
          barGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
          barCategoryGap: "50%" /*多个并排柱子设置柱子之间的间距*/,
          data: [79, 52, 200, 334, 390, 330],
          itemStyle: {
            normal: {
              barBorderRadius: false,
              color: "#1E9FFF",
            },
          },
        },
      ],
      series1: [
        {
          name: "入场数量",
          itemStyle: {
            normal: {
              color: "#FF005A",
              lineStyle: {
                color: "#FF005A",
                width: 2,
              },
            },
          },
          smooth: true,
          type: "line",
          data: [120, 132, 101, 134, 90, 230, 210],
          animationDuration: 2800,
          animationEasing: "cubicInOut",
        },
        {
          name: "出场数量",
          smooth: true,
          type: "line",
          itemStyle: {
            normal: {
              color: "#3888fa",
              lineStyle: {
                color: "#3888fa",
                width: 2,
              },
              areaStyle: {
                color: "#f3f8ff",
              },
            },
          },
          data: [220, 182, 191, 234, 290, 330, 310],
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
        {
          name: "车位剩余数",
          smooth: true,
          type: "line",
          itemStyle: {
            normal: {
              color: "#19BE6B",
              lineStyle: {
                color: "#19BE6B",
                width: 2,
              },
              areaStyle: {
                color: "#f3f8ff",
              },
            },
          },
          data: [150, 232, 201, 154, 190, 330, 410],
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
      ],
    };
  },

  created() {},
  methods: {
    indexChange(item, index) {
      this.indexActive = index;
    },
    indexChange1(item, index) {
      this.indexActive1 = index;
    },
    indexChange2(item, index) {
      this.indexActive2 = index;
    },
  },
};
</script>
  
  <style rel="stylesheet/scss" lang="scss">
.vehicle-map-top-warp {
  display: flex;
  justify-content: right;
}
.index-top-3-top {
  margin-left: 20px;
  display: flex;
  justify-content: right;
  height: 35px;
  .index-top-3-top-li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 35px;
    border: 1px solid #999;
    color: #999;
    font-size: 14px;
    cursor: pointer;
  }
  .active {
    border: 1px solid #2d8cf0 !important;
    color: #2d8cf0 !important;
  }
}
.vehicle-map {
  padding-top: 20px;
  padding-right: 20px;
  width: 100%;
  height: 700px;
  background: #fff;
  .vehicle-map-top {
    display: flex;
    justify-content: right;
  }
}
.dashboard-editor-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  // background-color: rgb(240, 242, 245);
  min-height: 100vh;
  background: #f2f8ff;
  position: relative;

  .content {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content-li {
      padding: 15px 15px 0 15px;
      width: 100%;
      height: 350px;
      background: #fff;
    }
    .content-li + .content-li {
      margin-top: 10px;
    }
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .index-top {
    display: flex;
    align-content: center;
    justify-content: space-between;
    height: 44.5vh;
    div {
      height: 100%;
    }
    .index-top-1 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 19%;
      .index-top-1-li {
        display: flex;
        align-items: center;
        height: 31%;
        background: #fff;
        border-radius: 5px;
        .index-top-1-li-left {
          display: flex;
          justify-content: center;
          align-content: center;
          width: 30%;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          img {
            width: 40px;
            object-fit: contain;
          }
        }
        .index-top-1-li-right {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 70%;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          .num {
            font-size: 30px;
            font-weight: bold;
          }
          .title {
            margin-top: 6px;
            font-size: 13px;
          }
        }
      }
    }
    .index-top-2 {
      padding-top: 2%;
      width: 39.5%;
      background: #fff;
    }
    .index-top-3 {
      padding: 15px;
      width: 59.5%;
      background: #fff;
      .index-top-3-top {
        display: flex;
        justify-content: right;
        height: 35px;
        .index-top-3-top-li {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 35px;
          border: 1px solid #999;
          color: #999;
          font-size: 14px;
          cursor: pointer;
        }
        .active {
          border: 1px solid #2d8cf0 !important;
          color: #2d8cf0 !important;
        }
      }
      .index-top-3-bottom {
        margin-top: 20px;
      }
    }
  }
}
</style>
  